<template>
    <button @click="awesome = !awesome">Toggle</button>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <div v-if="type === 'A'" v-on:click="type = 'B'">
        A
    </div>
    <div v-else-if="type === 'B'" v-on:click="type = 'C'">
        B
    </div>
    <div v-else-if="type === 'C'" v-on:click="ok = true">
        C
    </div>
    <div v-else>
     Not A/B/C
    </div>

    <h1 v-show="ok" @click="type = 'A'">Hello!</h1>

</template>

<script>
export default {
    data() {
        return {
            awesome: true,
            type: "A",    
            ok: false
        };
    },
};
</script>
